<template>
  <div>
    <puplic-modal
      width="1200px"
      :publicVisible="publicVisible"
      modalStyle="addEditSupportModal"
      @cancel="cancel"
      :title="title"
    >
      <div slot="content" class="content">
        <div class="search-group">
          <div class="input-wrap">
            <div class="label">身份证号:</div>
            <div class="input-item">
              <a-input :maxLength="30" clearable v-model="queryParam.idCard" placeholder="请输入单位名称" />
            </div>
          </div>

          <div class="input-wrap">
            <div class="label">入住时间:</div>
            <div class="time-item">
              <start-end-time
                :times="times"
                :showTime="{ format: 'HH:mm:ss' }"
                format="YYYY-MM-DD HH:mm:ss"
                @timeChange="timeChange"
                :resetTime="resetTime"
              ></start-end-time>
            </div>
          </div>

          <div class="btn-wrap">
            <a-button class="searchBtn" @click="searchQuery(queryParam.startTime, queryParam.endTime)" type="primary">
              搜索
            </a-button>
            <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
          </div>
        </div>
        <div class="f1">
          <a-table
            rowKey="id"
            class="tableList"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            @change="handleTableChange"
          >
            <template #personImage="records">
              <img
                v-if="records.personImage"
                :src="imgPrefix + records.personImage"
                style="width: 0.5rem; height: 0.5rem"
                :id="records.personImage"
                :data-original="imgPrefix + records.personImage"
                @click="werImg(records.personImage)"
              />
              <img v-else src="@/assets/imgs/tableperson.png" style="width: 0.5rem; height: 0.5rem" alt="" />
            </template>
            <template #action="records">
              <span class="operation deatil-color" @click="werImg(records.idCardUrl)">身份证照片</span>
              <img
                :id="records.idCardUrl"
                :src="imgPrefix + records.idCardUrl"
                :data-original="imgPrefix + records.idCardUrl"
                style="display: none"
              />
            </template>
          </a-table>
        </div>
      </div>
      <div slot="footer"></div>
    </puplic-modal>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import puplicModal from '@/components/publicModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { comMethods } from '@/mixins/comMethods'
import startEndTime from '@/components/startEndTime'
export default {
  components: { puplicModal, startEndTime },
  mixins: [JeecgListMixin, comMethods],
  name: 'addEditSupportModal',
  data() {
    return {
      url: {
        list: '/hotel/stay_person/page',
      },
      title: '房客信息',
      imgPrefix: '',
      publicVisible: false,
      disableMixinCreated: true,
      queryParam: {},
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '人脸头像',
          // dataIndex: 'companyName',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'personImage' },
        },
        {
          title: '姓名',
          dataIndex: 'personName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'idCard',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '房号',
          dataIndex: 'roomNumber',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '入住时间',
          dataIndex: 'checkInTime',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
        },
      ],
    }
  },
  methods: {
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.startTime = null
        this.queryParam.endTime = null
      }
    },

    show(records) {
      this.queryParam.companyId = records.id
      this.searchQuery()
      this.publicVisible = true
    },

    searchReset() {
      const { companyId } = this.queryParam
      this.queryParam = {}
      this.queryParam = { companyId }
      this.resetTime = true
      this.searchQuery()
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        zIndex: '999999',
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/common.less';

/deep/ .content {
  padding: 20px;
}

/deep/ .modalFooter {
  height: 0 !important;
}

/deep/ .ant-table-row-cell-ellipsis {
  cursor: pointer;
}

.search-group {
  padding: 0;
}
</style>
